<template>
    <div class="container_index">
       <div class="header">
         <div class="divide"></div>
         <p>学员管理</p>
       </div>

        <MySearch @searchParent="searchFun" @parentDialog="parentDialog"></MySearch>
        <MyTable @updateOpenDialog="updateOpenDialog" :arr="arr" @resetArr="initGeData"></MyTable>
        <MyPage @changePageSize="changePageSize" @changePage="changePage" :page="page"  :total="total" :pageSize="pageSize"></MyPage>      
        <MyDialog :type="type" :item="item" v-if="show"  @closeDialog="closeDialog" @resetTable="initGeData" ></MyDialog>
    </div>
   
</template>

<script>
import MySearch from './componentsone/MySearch.vue'
import MyTable from './componentsone/MyTable.vue'
import MyPage from './componentsone/MyPage.vue'
import MyDialog from './componentsone/MyDialog.vue'

// import server from '../../untial/api'
import { getInitLjjApi } from "../../api/ljjApi";
    export default {
        components:{
            MySearch,
            MyTable,
            MyPage,
            MyDialog          
        },
        data(){
            return{
                type:0, //0添加  1编辑
                show:false,
                arr:[],//保存表格数据
                keyword:"",//查询关键字
                page:1,//当前页码
                pageSize:20,//每页多少数据
                total:0,
                pageSizes:[20,40,60,80,100],
                item:{}//保存当前行的数据
            }
        },
        mounted(){
            this.initGeData()
        },
        methods:{
            updateOpenDialog(item){
                this.item = item
                this.show = true
                this.type=1

            },
            //关闭弹窗
            closeDialog(){
                this.show=false
            },
            //打开弹窗
            parentDialog(){
                this.show=true
                this.type=0
                this.item={}
            },
            //渲染页面
            initGeData(){
                //发送axios请求
                getInitLjjApi({keyword:this.keyword,page:this.page,pageSize:this.pageSize}).then(res=>{
                    // console.log('res数据',res);
                    if(res.code==200){
                    this.arr = res.data
                    this.total=res.total
                }
                    })               
            },
            searchFun(val){
                this.keyword = val
                // console.log(this.keyword);
                this.initGeData(val)

            },
            changePageSize(val){
                this.pageSize = val
                this.initGeData(val)
            },
            changePage(val){
                this.page = val
                this.initGeData(val)
            }

        }
    }
</script>

<style lang="less" scoped>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,
kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
video{
    box-sizing: border-box;
}
.container_index{
background: rgba(255,255,255,0.6);
padding:  0 10px;

.header{
    height: 60px;
    padding: 20px 0px ;
    display: flex;
    
    .divide{
        width:6px;
        height:20px;
        background: #438afe;
        margin-right: 14px;
    }
    p{
        color: #333333;
        font-size: 20px;
    }
}
}

</style>